<template>
  <div class="content" style="width: 305px">
    <div class="title">
      <b></b>
      <p>预警统计</p>
    </div>
    <el-carousel height="250px" :interval="6000">
      <el-carousel-item v-for="item in chartArr" :key="item.id">
        <div :id="'warning' + item.id" class="warning"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import * as Axios from "../api/myAxios";

export default {
  name: "WarningStatistics",
  data() {
    return {
      chartArr: null,
    };
  },
  mounted() {
    let fun = async () => {
      await Axios.post().then((res) => {
        this.chartArr = res.data.parameter.list;
      });
      let create = (idName, num) => {
        let datas = {
          beidou: [
            { name: "正常", value: 0 },
            { name: "预警", value: 0 },
          ],
          qixiang: [
            { name: "正常", value: 0 },
            { name: "预警", value: 0 },
          ],
        };
        Axios.post().then((res) => {
          let data = res.data.parameter.list[num].sensorList;
          let monitorName = res.data.parameter.list[num].monitorName;
          let bdArr = [],
            qxArr = [];
          for (let i in data) {
            if (data[i].moduleEnum == "00") {
              bdArr.push(data[i]);
            } else if (data[i].moduleEnum == "01") {
              qxArr.push(data[i]);
            }
          }
          for (let i in bdArr) {
            if (bdArr[i].equipmentWarnStatus == "00") {
              datas.beidou[0].value++;
            } else if (bdArr[i].equipmentWarnStatus == "01") {
              datas.beidou[1].value++;
            }
          }
          for (let i in qxArr) {
            if (qxArr[i].equipmentWarnStatus == "00") {
              datas.qixiang[0].value++;
            } else if (qxArr[i].equipmentWarnStatus == "01") {
              datas.qixiang[1].value++;
            }
          }
          let myChart = this.$echarts.init(document.getElementById(idName));
          let option = {
            title: [
              {
                text: monitorName,
                left: "center",
                textStyle: {
                  color: "white",
                  fontSize: 18,
                },
                top:"10%"
              },
              // {
              //   subtext: "北斗",
              //   left: "50%",
              //   top: "60%",
              //   textAlign: "center",
              //   subtextStyle: {
              //     color: "white",
              //     fontSize: 14,
              //   },
              // },
              {
                subtext: "岩土",
                left: "48%",
                top: "60%",
                textAlign: "center",
                subtextStyle: {
                  color: "white",
                  fontSize: 14,
                },
              },
            ],
            color: ["#2DDCFC", "#FC0303"],
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            series: [
              // {
              //   name: "外圆",
              //   type: "gauge",
              //   radius: "30%",
              //   center: ["50%", "40%"],
              //   color: "#345983",
              //   data: [{ name: "__other", value: "1" }],
              //   splitNumber: 10, //分割线个数（除原点外）
              //   axisLine: {
              //     // 坐标轴线
              //     lineStyle: {
              //       color: [
              //         [0.09, "#345983"],
              //         [0.82, "#345983"],
              //         [1, "#345983"],
              //       ],
              //       width: 6,
              //     },
              //   },
              //   pointer: {
              //     show: false,
              //   },
              //   axisLabel: {
              //     // 坐标轴数字
              //     show: false,
              //   },
              //   axisTick: {
              //     // 坐标轴标记
              //     length: 3,
              //     lineStyle: {
              //       color: "#13B5FC",
              //     },
              //   },
              //   splitLine: {
              //     // 分隔线
              //     length: 3,
              //     lineStyle: {
              //       width: 1,
              //     },
              //   },
              //   title: {
              //     //标题，显示'馆藏量'
              //     show: false,
              //   },
              // },
              // {
              //   name: "北斗",
              //   type: "pie",
              //   radius: "22.5%",
              //   center: ["50%", "40%"],
              //   startAngle: 270,
              //   hoverAnimation: false,
              //   data: datas.beidou,
              //   label: {
              //     formatter: "{b} : {c}",
              //     color: "white",
              //     fontSize: 11,
              //   },
              //   labelLine: {
              //     length: 10,
              //     length2: 5,
              //     lineStyle: {
              //       color: "white",
              //     },
              //   },
              // },
              {
                name: "外圆",
                type: "gauge",
                radius: "30%",
                center: ["50%", "40%"],
                color: "#345983",
                data: [{ name: "__other", value: "1" }],
                splitNumber: 10, //分割线个数（除原点外）
                axisLine: {
                  // 坐标轴线
                  lineStyle: {
                    color: [
                      [0.09, "#345983"],
                      [0.82, "#345983"],
                      [1, "#345983"],
                    ],
                    width: 6,
                  },
                },
                pointer: {
                  show: false,
                },
                axisLabel: {
                  // 坐标轴数字
                  show: false,
                },
                axisTick: {
                  // 坐标轴标记
                  length: 3,
                  lineStyle: {
                    color: "#13B5FC",
                  },
                },
                splitLine: {
                  // 分隔线
                  length: 3,
                  lineStyle: {
                    width: 1,
                  },
                },
                title: {
                  //标题，显示'馆藏量'
                  show: false,
                },
              },
              {
                name: "岩土",
                type: "pie",
                radius: "22.5%",
                center: ["50%", "40%"],
                startAngle: 270,
                hoverAnimation: false,
                data: datas.qixiang,
                label: {
                  formatter: "{b} : {c}",
                  color: "white",
                  fontSize: 11,
                },
                labelLine: {
                  length: 10,
                  length2: 5,
                  lineStyle: {
                    color: "white",
                  },
                },
              },
            ],
          };
          myChart.clear();
          myChart.setOption(option);
        });
      };
      if (this.chartArr.length == 1) {
        create(`warning${this.chartArr[0].id}`, 0);
      } else {
        for (let i = 0; i < this.chartArr.length; i++) {
          create(`warning${this.chartArr[i].id}`, i);
        }
      }
    };
    fun();
    const timer = setInterval(async () => {
      await fun();
    }, 1000 * 180);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
    });
  },
};
</script>

<style scoped>
.content {
  position: relative;
}

.warning {
  width: 300px;
  height: 250px;
  /* border: 1px solid red; */
}
</style>